<template>
	<view>
		<view class="templateContainer">
			
			<view class="templateBox" @click="goSWOT">
				<image  class="image"
						src="/static/tab-Icons/SWOT.png" 
						mode="widthFix" 
						style="width: 60%; margin-top: 30rpx; margin-bottom: 30rpx;">
				</image>
				
				<text class="textStyle" style="margin-bottom: 20rpx;">
					SWOT
				</text>
			</view>
			
			<view class="templateBox" @click="go5W1H">
				<image  class="image"
						src="/static/tab-Icons/5w1h.png" 
						mode="widthFix" 
						style="width: 60%; margin-top: 30rpx; margin-bottom: 30rpx;">
				</image>
				<text class="textStyle" style="margin-bottom: 20rpx;">
					5W1H
				</text>
			</view>	
					
			<!-- 我的笔记 -->
			<view class="templateBox" @click="goTM4">
				<image 	class="image"
						src="/static/tab-Icons/timeManage.png" 
						mode="widthFix" 
						style="width: 60%; margin-top: 30rpx; margin-bottom: 30rpx;">
				</image>
				<text class="textStyle" style="margin-bottom: 20rpx;">
					四象限
				</text>
			</view>
			
			<view class="templateBox" @click="">
				<image 	class="image"
						src="/static/tab-Icons/note.png" 
						mode="widthFix" 
						style="width: 60%; margin-top: 30rpx; margin-bottom: 30rpx;">
				</image>
				<text class="textStyle" style="margin-bottom: 20rpx;">
					敬请期待
				</text>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				
			};
		},
		
		methods: {
				
			goSWOT(){
				uni.navigateTo({
					url:'/pages/SWOT/SWOT?FileName=newFile'
				})
			},
			
			go5W1H(){
				uni.navigateTo({
					url:'/pages/5W1H/5W1H?FileName=newFile'
				})
			},
			
			goTM4(){
				uni.navigateTo({
					url:'/pages/timeManageFour/timeManageFour?FileName=newFile'
				})
			}
		}
	}
</script>

<style>
	.templateContainer{
		display: flex;
		flex-direction: row;
		flex-wrap: wrap;
	}
	
    .templateBox {
		display: flex;
		flex-direction: column;
		background-color: #fff;
		width: 34%;
		padding: 15rpx;
		border-radius: 30rpx;
		box-shadow: 0 4rpx 20rpx rgba(0, 0, 0, .1);
		margin-top: 8%;
		margin-left: 8%;
		align-items: center;
	}
	
	.textStyle {
		font-size: 40rpx;
	}
	
	.image {
		margin-right: 0%;
	}
</style>
